import picture from '../assets/search_icon.png';

const InputBox = ({ onChange, onFocus, onBlur, onClick, value }) => {

  const placeholder = '请输入你想要搜索的英雄名';

  return (
    <div className="absolute bottom-[10px] right-[40px] flex py-[10px] px-[10px] border-[#d2d2d2] border-[1px] items-center gap-[10px]">
      <input type="text" className="border-none outline-none text-[12px] w-50 text-[rgb(100,100,100)]" placeholder={placeholder} value={value} onChange={(e) => onChange(e.target.value)} onFocus={onFocus} onBlur={onBlur}/>
      <img src={picture} className="w-[17px] h-[16px] border-l-[1px] pl-[10px] box-content border-l-[#d2d2d2] cursor-pointer" onClick={onClick}/>
    </div>
  );
};

export default InputBox;